<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增线路配置')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-gateways-add">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwName}" ></label>
                    <div class="col-sm-8">
                        <input name="gwName" id="gwName" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.purpose}"></label>
                    <div class="col-sm-8">
                        <select name="purpose" class="form-control m-b">
                            <option value="0" th:text="#{gateways.form.purpose.abandoned}"></option>
                            <option value="1" th:text="#{gateways.form.purpose.toolbar}"></option>
                            <option value="2" th:text="#{gateways.form.purpose.outgoing}"></option>
                            <option value="3" th:text="#{gateways.form.purpose.unlimited}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.profileName}"></label>
                    <div class="col-sm-8">
                        <select name="profileName" class="form-control m-b" >
                            <option th:each="profileData:${profileList}" th:value="${profileData.profileName}" th:text="${profileData.profileName}" ></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.caller}"></label>
                    <div class="col-sm-8">
                        <input name="caller" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.calleePrefix}"></label>
                    <div class="col-sm-8">
                        <input name="calleePrefix" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwAddr}"></label>
                    <div class="col-sm-8">
                        <input name="gwAddr" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.codec}"></label>
                    <div class="col-sm-8">
                        <input name="codec" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.gwDesc}"></label>
                    <div class="col-sm-8">
                        <input name="gwDesc" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.maxConcurrency}"></label>
                    <div class="col-sm-8">
                        <input name="maxConcurrency" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.register}"></label>
                    <div class="col-sm-8">
                        <select id="register" name="register" class="form-control m-b">
                            <option value="0" th:text="#{gateways.form.label.register0}"></option>
                            <option value="1" th:text="#{gateways.form.label.register1}"></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 register-param">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.authUsername}"></label>
                    <div class="col-sm-8">
                        <input name="authUsername" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12 register-param">
                <div class="form-group">
                    <label class="col-sm-3 control-label" th:text="#{gateways.form.authPassword}"></label>
                    <div class="col-sm-8">
                        <input name="authPassword" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label is-required" th:text="#{gateways.form.priority}"></label>
                    <div class="col-sm-8">
                        <input name="priority" class="form-control" type="text" required>
                    </div>
                </div>
            </div>

        </form>

        <div class="row" ></div>
        <div class="row" >
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="addRows()">
                    <i class="fa fa-plus"></i> <span th:text="#{gateways.form.addRows}"></span>
                </a>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "cc/gateways"
        var paramSize = 0;
        $(function() {
            $(".register-param").hide();


            // 初始化表单验证
            $("#form-gateways-add").validate({
                focusCleanup: true,
                rules: {
                    gwName: {
                        required: true,
                        customPattern: true
                    }
                },
                messages: {
                    gwName: {
                        required: "请输入网关名称",
                        customPattern: "网关名称必须以字母开头，且只能包含字母和数字"
                    }
                }
            });

            // 自定义验证规则
            $.validator.addMethod("customPattern", function(value, element) {
                return this.optional(element) || /^[A-Za-z][A-Za-z0-9]*$/.test(value);
            });


        });

        function submitHandler() {
            if ($.validate.form()) {

                var formData = $('#form-gateways-add').serializeArray();
                // 添加的配置
                var configs = {}
                $('input.new-config-name').each(function() {
                    var newConfigId = $(this).attr('id');
                    var configKey = $(this).val().trim();
                    var configValue = $("#" + newConfigId + "_value").val().trim();
                    configs[configKey] = configValue;
                });
                formData.push({"name": "configs", "value": JSON.stringify(configs)})
                $.operate.save(prefix + "/add", formData);
            }
        }

        $("#register").change(function(event){
            var register = $(event.target).val();
            if (register == 1) {
                $(".register-param").show();
            } else {
                $(".register-param").hide();
            }
        });


        // 追加一行配置
        function addRows(){
            paramSize ++;
            var addConfigs = '';
            addConfigs += '<div className="row">';
            addConfigs += '<div class="col-sm-12">';
            addConfigs += '<div class="col-sm-3"><input class="new-config-name form-control" type="text" value="" id="newConfig_' + paramSize + '" placeholder="' + i18n('gateways.form.placeholder.name') + '"/></div><div class="col-sm-8"><input class="new-config-value form-control" type="text" id="newConfig_' + paramSize + '_value" value="" placeholder="' + i18n('gateways.form.placeholder.value') + '"/></div>';
            addConfigs += '</div>';
            addConfigs += '</div>';
            $('#form-gateways-add').append(addConfigs);
        }

    </script>
</body>
</html>